<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input v-model="query.orderCode" clearable placeholder="订单编号" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <date-range-picker class="date-item" v-model="createTime"></date-range-picker>
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="产品SN">
            <el-input v-model="form.productSn" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="产品型号">
            <el-input v-model="form.productCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="产品类型">
            <el-input v-model="form.productType" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="订单编号">
            <el-input v-model="form.orderCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="工单编号">
            <el-input v-model="form.workOrderCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="产线编号">
            <el-input v-model="form.lienCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="工段编号">
            <el-input v-model="form.sectionCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="工位编号">
            <el-input v-model="form.stationCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="工序编号">
            <el-input v-model="form.operationCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="设备编号">
            <el-input v-model="form.deviceCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="判断结果">
            <el-select v-model="form.paramResult" filterable placeholder="请选择">
              <el-option
                v-for="item in dict.result"
                :key="item.id"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="参数编码">
            <el-input v-model="form.paramCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="参数名称">
            <el-input v-model="form.paramName" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="参数值">
            <el-input v-model="form.paramValue" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="判断范围">
            <el-input v-model="form.paramRange" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="参数单位">
            <el-input v-model="form.paramUnit" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="测试顺序">
            <el-input v-model="form.paramNumber" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="创建人">
            <el-input v-model="form.createBy" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker v-model="form.createTime" type="datetime" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="更新人">
            <el-input v-model="form.updateBy" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="更新时间">
            <el-date-picker v-model="form.updateTime" type="datetime" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="handleSelectionChange" :row-key="getRowKey">
        <el-table-column type="selection" width="55" :reserve-selection="true"/>
        <el-table-column
          type="index"
          label="序号"
          width="50"/>
        <el-table-column width="250" align="center" prop="productSn" label="产品SN" />
        <el-table-column width="160" align="center" prop="productCode" label="产品型号" />
        <el-table-column width="160" align="center" prop="paramCode" label="参数编码" />
        <el-table-column width="160" align="center" prop="paramName" label="参数名称" />
        <el-table-column width="160" align="center" prop="paramValue" label="参数值" />
        <el-table-column width="80" align="center" prop="paramUnit" label="参数单位" />
        <el-table-column width="80" align="center" prop="paramResult" label="判断结果">
          <template slot-scope="scope">
            <el-tag :type="getResultStatus(scope.row.paramResult)">
              {{ dict.label.result[scope.row.paramResult] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column width="160" align="center" prop="paramRange" label="判断范围" />

        <el-table-column width="80" align="center" prop="paramNumber" label="测试顺序" />

        <el-table-column width="160" align="center" prop="deviceCode" label="设备编号" />

        <el-table-column width="160" align="center" prop="workOrderCode" label="工单编号" />

        <el-table-column resizable width="120" align="center" prop="createBy" label="操作人" />
        <el-table-column resizable width="150" align="center" prop="createTime" label="操作时间" />
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
  import crudDataCourseParam from '@/api/data/dataCourseParam'
  import CRUD, { presenter, header, form, crud } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  import crudProductModel from '@/api/product/productModel'
  import DateRangePicker from '@/components/DateRangePicker'

  const defaultForm = { id: null, productSn: null, productCode: null, productType: null, orderCode: null, workOrderCode: null, lienCode: null, sectionCode: null, stationCode: null, operationCode: null, deviceCode: null, paramResult: null, paramCode: null, paramName: null, paramValue: null, paramRange: null, paramUnit: null, paramNumber: null, passStationId: null, createBy: null, createTime: ['2022-06-01 00:00:00', '2022-06-30 23:59:59'], updateBy: null, updateTime: null }
  export default {
    name: 'DataCourseParam',
    components: { pagination, crudOperation, rrOperation, udOperation,DateRangePicker },
    mixins: [presenter(), header(), form(defaultForm), crud()],
    dicts: ['result'],
    props:['requestParameter','testData'],
    cruds() {
      return CRUD({ title: '过程数据', url: 'api/dataCourseParam', idField: 'id', sort: 'id,desc', crudMethod: { ...crudDataCourseParam },optShow:{add: false,
          edit: false,
          del: false,
          download: false,
          reset: true,
          import: false}})
    },
    data() {
      return {
        createTime: [this.getDate()+" 00:00:00", this.getDate()+" 23:59:59"],
        productModel:[],
        permission: {
          add: ['admin', 'dataCourseParam:add'],
          edit: ['admin', 'dataCourseParam:edit'],
          del: ['admin', 'dataCourseParam:del']
        },
        rules: {
        },
        queryTypeOptions: [
          { key: 'id', display_name: 'ID' },
          { key: 'productSn', display_name: '产品SN' },
          { key: 'productCode', display_name: '产品型号' },
          { key: 'productType', display_name: '产品类型' },
          { key: 'orderCode', display_name: '订单编号' },
          { key: 'workOrderCode', display_name: '工单编号' },
          { key: 'lienCode', display_name: '产线编号' },
          { key: 'sectionCode', display_name: '工段编号' },
          { key: 'stationCode', display_name: '工位编号' },
          { key: 'operationCode', display_name: '工序编号' },
          { key: 'deviceCode', display_name: '设备编号' },
          { key: 'paramResult', display_name: '判断结果' },
          { key: 'paramCode', display_name: '参数编码' },
          { key: 'paramName', display_name: '参数名称' },
          { key: 'paramValue', display_name: '参数值' },
          { key: 'paramRange', display_name: '判断范围' },
          { key: 'paramUnit', display_name: '参数单位' },
          { key: 'paramNumber', display_name: '测试顺序' },
          { key: 'passStationId', display_name: '过站ID' },
          { key: 'createBy', display_name: '创建人' },
          { key: 'updateBy', display_name: '更新人' }
        ]
      }
    },
    methods: {
      // 钩子：在获取表格数据之前执行，false 则代表不获取数据
      [CRUD.HOOK.beforeRefresh](crud) {
        crud.params.createTime = this.createTime;
        crud.params.deviceCode=this.requestParameter.deviceCode;
        crud.params.paramCode=this.requestParameter.paramCode;
        crud.params.productCode=this.requestParameter.productCode;

        return true
      },
      // 钩子 : 获取数据之后
      [CRUD.HOOK.afterRefresh](crud) {
        let arr = this.testData;
        //回显复选框
        this.$nextTick(() => {
          let list = []
          if (arr && crud.data) {
            list = arr.map(item => item.id)
            crud.data.forEach((item) => {
              if (list.includes(item.id)) {
                this.$refs.table.toggleRowSelection(item, true)
              }
            })
          }
        })
        return true
      },
      //获取当前工序状态颜色
      getResultStatus(result){
        if(result == '1' || result == '2'){
          return 'success';
        }else if(result == '0'){
          return 'danger';
        }else{
          return 'info';
        }
      },
      handleSelectionChange(val) {
        this.$emit('update:testData', val);
      },
      //获取当前时间
      getDate(){
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
      },
      getRowKey(row){
        return row.id;
      }
    },
    mounted() {

    }
  }
</script>

<style scoped>

</style>
